<script src="js/smoothscroll.js"></script>
<script>document.cookie="last=pages/elementospaginaweb.php";</script>

<p class="xl">Elementos de una Página Web</p>
<img src="img/google.jpg" height="192" title="Google"></img>
<img src="img/facebook.jpg" height="192" title="Facebook"></img>

<p class="separado">Como podemos observar en las imágenes o bien en este mismo sitio, existen diferentes elementos con los que podemos interactuar dentro de una página web.</p> 
<p>En esta lección aprenderá cómo utilizar los componentes más típicos. Comencemos por los enlaces (links, por su nombre en inglés).</p>

<div id="enlace">
    <p class="larger">Enlaces</p>
    <p>Un enlace puede poner en acción varios acontecimientos:</p>
    <ul>
        <li>Pasar a una nueva página web o a un lugar distinto de la misma página.</li>
        <li>Comenzar a descargar un archivo desde la web.</li>
        <li>Iniciar una aplicación o juego.</li>
    </ul>
    <p>Un enlace es fácilmente reconocible ya que al posarse sobre este, el puntero del mouse se convierte en una mano. En general los enlaces son textos subrayados de color azul (violeta si ya fueron visitados).</p>
    <p>Realicemos un ejercicio. Mueva el puntero del mouse sobre este <a href="#boton" class="smoothScroll" onclick="mostrar('boton')">enlace</a> para ver como cambia la forma del puntero y luego haga clic con el botón <i>izquierdo</i> sobre el mismo.</p>
</div>

<div id="boton" class="oculto">
    <p class="felicitacion">¡Excelente, como puede observar ha presionado un enlace y hubo un cambio en la página web!</p>
    <p class="larger separado">Botón</p>
    <p>Un botón ejecuta una acción específica según el contexto, por ejemplo, confirmar el ingreso de datos. Si el texto es de color gris, el botón está deshabilitado; el clic no funcionará hasta completar algún elemento que habilite el botón.</p>
    <p>Haga clic sobre el siguiente <a href="#simple" class="boton smoothScroll" onclick="mostrar('simple');">botón</a> para continuar.</p>
</div>

<div id="simple" class="oculto">
    <p class="felicitacion">¡Felicitaciones, ha aprendido a usar un botón!</p>
    <p class="larger separado">Caja de texto</p>
    <p>Es una figura rectangular en la cual es posible ingresar una línea de texto. Para poder escribir dentro de una caja de texto primero se debe hacer clic dentro del recuadro para luego introducir texto con el teclado.</p>
    <p>Existen varios tipos de cajas de texto. Veamos un ejemplo de cada una para aprender a utilizarlas.</p>

    <p class="large separado">Caja de texto simple</p>
    <p>Haga clic en la caja de texto simple, escriba algo y luego haga clic en el botón para continuar.</p>
    <table>
        <th></th><th></th>
        <th><p><b>Explicación animada</b></p></th>
        <tr><td>
            <input type="text" id="cajaTextoSimple" tabindex="1" onkeyup="able(esTextoLargo(this.id,3),'botonTextoSimple')" onpaste="event.preventDefault()" title="Haga clic y escriba algo."></input>
        </td><td>
            <a href="#multi" id="botonTextoSimple" class="boton smoothScroll disabled" onclick="mostrar('multi')" tabindex="2">Continuar</a>
        </td><td class="separadoizq">
            <img src="img/TxtSimpleFinal.gif" height="70" title="Texto Simple" class="expanimada"></img>
        </td></tr>
    </table>
</div>

<div id="multi" class="oculto">
    <p class="felicitacion">¡Excelente, ha aprendido a ingresar texto en la caja de texto simple!</p>
    <p class="large separado">Caja de texto multilínea</p>
    <p>Posibilita ingresar más de una línea de texto separándolo automáticamente en renglones.</p>
    <p>Haga clic en la caja de texto multilínea, escriba al menos 30 caracteres y luego haga clic sobre el botón para continuar.<p>
    <table>
        <th></th><th></th>
        <th><p><b>Explicación animada</b></p></th>
        <tr><td>
            <textarea rows="3" cols="8" id="cajaTextoMulti" tabindex="3" onkeyup="able(esTextoLargo(this.id,30),'botonTextoMulti')" title="Haga clic y escriba al menos 30 caracteres."></textarea>
        </td><td>
            <a href="#pass" id="botonTextoMulti" class="boton smoothScroll disabled" onclick="mostrar('pass')" tabindex="4">Continuar</a>
        </td><td class="separadoizq">
            <img src="img/CajaDeTxtMulti.gif" height="70" title="Texto Multilínea" class="expanimada"></img>
        </td></tr>
    </table>
</div>

<div id="pass" class="oculto">
    <p class="felicitacion">¡Felicitaciones, ha aprendido a ingresar texto en la caja de texto multilínea!</p>
    <p class="large separado">Caja de contraseña</p>
    <p>Es igual a la caja de texto simple con la excepción que oculta el contenido que se ingresa.</p>
    <p>Haga clic en la caja de contraseña, escriba al menos 8 caracteres y luego haga clic sobre el botón para continuar.<p>
    <table>
        <th></th><th></th>
        <th><p><b>Explicación animada</b></p></th>
        <tr><td>
            <input type="password" id="cajaPass" tabindex="5" onkeyup="able(esTextoLargo(this.id,8),'botonPass')" onpaste="event.preventDefault()" title="Haga clic y escriba al menos 8 caracteres."></input>
        </td><td>
            <a href="#radio" id="botonPass" class="boton smoothScroll disabled" onclick="mostrar('radio')" tabindex="6">Continuar</a>
        </td><td class="separadoizq">
            <img src="img/CajaPass.gif" height="70" title="Caja de Contraseña" class="expanimada"></img>
        </td></tr>
    </table>
</div>

<div id="radio" class="oculto">
    <p class="felicitacion">¡Excelente, ha aprendido a ingresar texto en la caja de contraseña!</p>
    <p class="large separado">Botón de opción</p>
    <p>Permite elegir una opción entre un conjunto de posibilidades al hacer clic sobre el círculo o sobre el texto que lo acompaña.</p>
    <p>Seleccione una de las siguientes opciones:</p>
    <label><input type="radio" name="o" value="1" onclick="asignar('opcion', this.value);mostrar('check');">Opción 1</label>
    <label><input type="radio" name="o" value="2" onclick="asignar('opcion', this.value);mostrar('check');">Opción 2</label>
    <label><input type="radio" name="o" value="3" onclick="asignar('opcion', this.value);mostrar('check');">Opción 3</label>
    <p>Opción seleccionada: <b id="opcion"></b></p>
</div>

<div id="check" class="oculto" >
    <p class="felicitacion">¡Felicitaciones, ha aprendido a usar el botón de opción!</p>
    <p class="large separado">Casilla de verificación</p>
    <p>Permite elegir una opción entre dos posibilidades (estados) al hacer clic sobre el cuadrado o sobre el texto que lo acompaña.</p>
    <p>Cambie el estado de la casilla para continuar.</p>
    <label><input type="checkbox" onclick="asignar('estado', this.checked ? 'V' : 'F');mostrar('lista');">Verdadero</label>
    <p>Estado de la casilla: <b id="estado">F</b></p>
</div>

<div id="lista" class="oculto" >
    <p class="felicitacion">¡Excelente, ha aprendido a usar la casilla de verificación!</p>
    <p class="large separado">Lista desplegable</p>
    <p>Permite elegir una opción entre varias posibilidades al hacer clic para desplegar la lista y luego sobre la opción deseada.</p>
    <p>Seleccione una de las siguientes opciones:</p>
    <select onchange="asignar('item', this.value);mostrar('final');" title="Haga clic para desplegar la lista.">
        <option value="0" selected>Seleccione</option>
        <option value="1">Opción uno</option>
        <option value="2">Opción dos</option>
        <option value="3">Opción tres</option>
    </select>
    <p>Opción seleccionada: <b id="item"></b></p>
</div>

<div id="final" class="oculto" >
    <p class="felicitacion">¡Felicitaciones, ha aprendido a usar la lista desplegable!</p>
    <p class="siguiente">Haga clic en el siguiente enlace para <a href="#" onclick="load('pages/cuentausuario.php');levelUp('2');">seguir aprendiendo</a>.</p>
</div>
